//这里
require(['./config'],()=>{
    //先引入config ，让配置生效就可以使用配置好的短名称
    require(['template','header','footer','bootstrap','jquery'],(template ,header)=>{
      class Cart{
        constructor(){
         this.render()
         if(this.cart){
           this.calcTotal()
           this.checksChange()
           this.setAllCheck()
           this.Del()
           this.BtnClickJia()
           this.BtnClickJian()
           this.AllCheckChange()
         }
        }
        
        render(){
          //取出localStorage里存的数据
          const cart = localStorage.getItem('cart')
          if(cart){
            // 有数据  渲染订单
            
            this.cart = JSON.parse(cart)
            $('#cart-list').append(
              template('cartTemplate' , {
                cart : this.cart
              })
            )

          }else{
            $('#cart-empty').show()
            $('#main').hide()
          }
        }
        calcTotal(){
            // 第一次遍历的时候：
            //   后面初始值就是money的值为0，shop就是this.cart[0]
            //   判断shop是否选中，是的话money就加上这条商品的小计价格，并且把money return出去
            // 第一次的return会作为下一次的money参数继续计算，这个时候shop就是this.cart[1]
            //    再去判断shop是否选中，如果没有选中，那就直接return上一次的money，继续参与第三次运算
            // 当遍历结束，外面的total拿到的就是最后所有选中商品的总价了
          const total = this.cart.reduce((money , shop)=>{
            if(shop.check){
              money += shop.price * shop.count
            }
            return money
          },0) // 初始值为0
          $('#paymoney').html(total.toFixed(2))
        }
       checksChange(){
         //input的改变
         // 需要this
         const _this = this
         $('.checks').on('change',function(){
          //需要取到当前选择框
           //从父级身上取到自定义属性data-id
           const id  = $(this).parents('div').data('id')
          // $(this).prop('checked')
          _this.cart = _this.cart.map(shop =>{
            if(shop.id === id ){
              shop.check = $(this).prop('checked')
            }
            return shop
          })
          //修改好的cart 存入localStorage
          localStorage.setItem('cart', JSON.stringify(_this.cart))
          //重新计算总价
          _this.calcTotal()
          //重新设置全选状态
          _this.setAllCheck()
         })
       }
        setAllCheck(){
          // 下面的按钮全部选择之后，全选按钮显示选中
          $('#AllCheck').prop('checked' , this.cart.every(shop=> shop.check))
          
        }
        AllCheckChange(){
          const _this = this
          //选中全选按钮之后，下面的订单的check状态改为true
          $('#AllCheck').on('change',function(){
             if($('#AllCheck').is(':checked' ) ==true){
              $('.checks').prop('checked' ,true)
              _this.cart=  _this.cart.map(shop=>{
                shop.check =true
                return shop
              })
             }
             if($('#AllCheck').is(':checked' ) ==false){
              $('.checks').prop('checked' ,false)
              _this.cart=  _this.cart.map(shop=>{
                shop.check = false
                return shop
              })
             }
             //头部里面的购物车的数据改变
            //  header.calacCartCount()
            //  _this.calcTotal()
             //修改好的cart 存入localStorage
          localStorage.setItem('cart', JSON.stringify(_this.cart))
          //重新计算总价
          _this.calcTotal()
          })
        }
        Del(){
          //删除单条订单
            const _this = this
            
          $('.del-btn').on('click',function(){
           $(this).parent().remove()
           const id  = $(this).parents('div').data('id')
           _this.cart.splice(_this.cart.findIndex(item=>item.id === id),1)
          //  _this.cart = _this.cart.filter( shop =>  shop.id!=id)
             if(_this.cart.length ==0){
               localStorage.removeItem('cart')
             }else{
               localStorage.setItem('cart', JSON.stringify(_this.cart))
             }
             
             //删除完之后渲染页面
             const cart = localStorage.getItem('cart')
             if( !cart){
              $('#cart-empty').show()
              $('#main').hide()
              //头部里面的购物车的数据改变
              header.calacCartCount()
             }
           _this.calcTotal()
           header.calacCartCount()
          })
        }
        BtnClickJia(){
          //加的按钮
          const _this = this
          $('.jia').on('click',function(){
            
            const id = $(this).parents('div').data('id')
            //点击加号后给减号的不可用设置为可用
           $(this).prev().prev().attr('disabled',false)
            _this.cart = _this.cart.map(shop => {
              if (shop.id === id) {
                shop.count++
                $(this).parent().next().html((shop.count * shop.price).toFixed(2))
                localStorage.setItem('cart', JSON.stringify(_this.cart))
                $(this).prev().html(shop.count)
                header.calacCartCount()
              }
              return shop
            })
             
            _this.calcTotal()
          })
        }
        BtnClickJian(){
          //减的按钮
          const _this = this
          $('.jian').on('click',function(){
            
            const id = $(this).parents('div').data('id')
           
            _this.cart = _this.cart.map(shop => {
              if (shop.id === id) {
                if(shop.count <=1){
                  shop.count =1
                  $(this).attr('disabled',true)
                }else{

                  shop.count--
                }
                $(this).parent().next().html((shop.count * shop.price).toFixed(2))
                if(shop.count <=1){
                  shop.count=1
                  $(this).attr('disabled',true)
                }
                
                localStorage.setItem('cart', JSON.stringify(_this.cart))
                $(this).next().html(shop.count)
                header.calacCartCount()
              }
              return shop
            })

            
            _this.calcTotal()
          })
        }

      }
      return new Cart()
    })
  })
  